import _ from 'lodash'
// import { uploaderFile } from '@/api/auth';
// import { HTTP_STATUS } from '@/utils/http';
import { Toast } from 'vant'
import { getUploadFile } from '@/api/auth'
import formFileType from '@/components/Form/fieldType/file'
import { getQiNiuToken } from '@/api/qiniu'
import * as qiniu from 'qiniu-js'
import { isWeixin } from '@/utils/device'
import { getPreviewFileBase64 } from '@/api/template'

export default {
  props: {
    // 上传文件类型
    fileType: {
      type: Array,
      default: () => ['jpg', 'jpeg', 'png', 'gif'],
    },
    // 最大数量
    maxCount: {
      type: Number,
      default: () => 0,
    },
    // 最小数量
    minCount: {
      type: Number,
      default: () => 0,
    },
    // 文件大小M
    size: {
      type: Number,
      default: () => 20,
    },
    // 文件下载
    // 0 === 不许下载 / 1 === 下载源文件 / 2 === 下载水印文件
    download: {
      type: Number,
      default: () => 1,
    },

    // 是否加水印
    isWatermark: {
      type: Boolean,
      default: () => false,
    },
  },

  computed: {
    // 可预览的文件类型
    previewFileTypes () {
      return this.fileImgType.concat(this.documentTypes)
    },

    // 是否可以下载
    isDownload () {
      return this.download !== 0
    },

    // 最大文件大小 byte
    maxSize () {
      return this.size === 0 ? undefined : (this.size * 1024 * 1024)
    },

    // 图片预览文件
    previewUrl () {
      // const { url, file } = this.preview;
      // const isImg = this.isImage(file.name);
      return this.fileError
    },

    // 最大数量
    mCount () {
      return this.maxCount === 0 ? undefined : this.maxCount
    },

    // 预览
    preview () {
      return this.previewFile.file
    },
  },

  watch: {
    fileType: {
      immediate: true,
      handler (val) {
        const file = this.fileImgType
        this.accept = _.map(
          val, (o) => {
            const str = file.indexOf(o) > -1 ? '' : 'image/'
            return `${str}${o}`
          },
        )
      },
    },

    value: {
      immediate: true,
      handler (val) {
        const upLoaderList = []
        _.forEach(val, ({ name, url }) => {
          if (url) {
            upLoaderList.push({
              file: { name },
              url,
            })
          }
        })
        this.upLoaderList = upLoaderList
      },
    },
  },

  data () {
    // 图片
    const fileImgTypes = ['jpg', 'jpeg', 'png', 'gif']

    // 文档
    const documentTypes = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf']

    return {
      fileError: require('@/assets/images/loading/file.png'),

      // img
      fileImgType: fileImgTypes,

      // document
      documentTypes,
      // 上传数据
      upLoaderList: [],
      // 上传格式
      accept: [],
      formFileType,

      // 文件预览
      previewFile: {
        show: false,
        file: {
          file: {
            // 文件名称
            name: '',
          },
        },
      },
    }
  },

  methods: {
    // 下载图片
    downloadIamge (imgsrc, name) { // 下载图片地址和图片名
      // const image = new Image();
      // 解决跨域 Canvas 污染问题
      // image.setAttribute('crossOrigin', 'anonymous');
      // image.onload = function () {
      //   const canvas = document.createElement('canvas');
      //   canvas.width = image.width;
      //   canvas.height = image.height;
      //   const context = canvas.getContext('2d');
      //   context.drawImage(image, 0, 0, image.width, image.height);
      //   const url = canvas.toDataURL('image/png'); // 得到图片的base64编码数据
      //   const a = document.createElement('a'); // 生成一个a元素
      //   const event = new MouseEvent('click'); // 创建一个单击事件
      //   a.download = name || 'photo'; // 设置图片名称
      //   a.href = url; // 将生成的URL设置为a.href属性
      //   a.dispatchEvent(event); // 触发a的单击事件
      // };
      // image.src = imgsrc;
    },

    // 下载文件
    downLoadFile () {
      const { url, file } = this.preview
      if (!url) {
        Toast.fail('下载地址出错！')
        return
      }

      if (isWeixin()) {
        Toast.fail('请通过浏览器打开！')
        return
      }

      const a = document.createElement('a') // 生成一个a元素
      const event = new MouseEvent('click') // 创建一个单击事件
      a.download = file.name // 设置文件名称
      a.href = url // 将生成的URL设置为a.href属性
      a.dispatchEvent(event) // 触发a的单击事件
    },

    // 是否为图片
    isImage (name) {
      let nameType = (name.split('.')) || []
      nameType = nameType[nameType.length - 1]
      return this.fileImgType.indexOf(nameType) > -1
    },

    // 是否预览文件
    isPreviewFile (name) {
      let nameType = (name.split('.')) || []
      nameType = nameType[nameType.length - 1]
      return this.previewFileTypes.indexOf(nameType) > -1
    },

    // 预览图片
    onPreview (file) {
      // file
      // this.$toast.success({
      //   message: '预览/下载请在电脑端操作！',
      //   icon: 'description'
      // });
      this.$set(this.previewFile, 'file', file)
      this.$set(this.previewFile, 'show', true)
    },

    // 重置内容
    resetValue () {
      if (this.canDo) return this.upLoaderList
      this.upLoaderList = []
    },

    // 文件读取前的回调函数
    beforeRead (file) {
      const { name } = file
      let n = name.split('.')
      n = n[n.length - 1]
      const isType = this.fileType.indexOf(n) > -1
      if (!isType) {
        this.$toast.fail(`请上传${this.fileType.toString()}格式!`)
        return false
      }
      return true
    },

    // 文件读取完成后的回调函数
    afterRead (file, content) {
      const { index } = content

      this.uploadImg(file.file)
        .then(({ url, name }) => {
          this.upLoaderList.splice(index, 1, {
            file: { name },
            url,
          })
        })
        .catch(() => {
          this.upLoaderList.splice(index, 1)
        })
        .finally(() => {
          this.onChange(_
            .map(this.upLoaderList, ({ file, url }) => ({
              name: file.name,
              url,
            })))
        })
    },

    // 文件名
    fileNameHash (name) {
      const n = name.split('.')
      n[0] = `${n[0]}-${Date.now()}`
      return n.join('.')
    },

    // 上传
    uploadImg (file) {
      const fileUrl = 'http://dev.inhoo.net.cn/'
      const toast = Toast.loading({
        message: '上传中0%',
        forbidClick: true,
        overlay: true,
        duration: 0,
      })

      return new Promise((resolve, reject) => {
        // console.log(file, 'filefile');
        getQiNiuToken().then(({ uptoken: token }) => {
          const fileName = this.fileNameHash(file.name)
          const observable = qiniu.upload(file, fileName, token)
          observable.subscribe(
            (next) => {
              const { total } = next
              toast.message = `上传中${window.parseInt(total.percent)}%`
            }, // 进度
            (error) => {
              Toast.fail('上传失败')
              reject(error)
              toast.clear()
            },
            async (complete) => {
              try {
                const { key } = complete
                // this.isPreviewFile(key) && (await getUploadFile({ filename: fileName }));
                resolve({ url: `${fileUrl}${key}`, name: key })
                toast.clear()
              } catch (error) {
                Toast.fail('上传失败')
                toast.clear()
                reject(error)
              }
            },
          )
        })
      })
    },

    // 文件大小回调
    onOversize () {
      Toast.fail(`最大上传文件大小为${this.size}M！`)
    },
  },
}
